سون لرن • آموزش

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون آموزش داده شده که چطور تصاویرتون رو با استفاده از SVG پیشرفته تر و زیباتر کنید. مثلا فرض کنید که تصویری دارید که درون اون افرادی هستن و میخاهید اونا رو معرفی کنید. با هاور کردن بر روی هر فرد، همه چیز بغیر از اون فرد سیاه و سفید میشه و نام اون فرد نمایش داده میشه.

برای شروع وارد سایت Interactive-Color-Photo بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Redirecting Loader ) جالب رو در اختیارتون بزارم.

همونطور که دیدین لودری برای ریدایرکت شدن قرار داده شده و میتونین از اون استفاده کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره.

موضوع 3 : المنتها و کار با DOM

مورد 16 : دریافت استایلهای یک المنت

اگر بخوایم در jQuery به استایلهای یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد css به خاصیت ruleName دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

شما میتونین با استفاده از el.currentStyle به خصوصیتهای المنت دسترسی داشته باشید، منتها با توجه به نوع خصوصیت CSS انواع مختلفی برگشت داده میشن. پس باید بفکر راه بهتری باشیم. اگر بخواید حتما IE8 رو پشتیبانی کنه میتونین از این polyfills استفاده کنید و به هدفتون برسید.

برای IE9 به بالا:

میبینید که به سادگی با استفاده از getComputedStyle به خصوصیت مورد نظر از el دست پیدا کردیم.

مورد 17 : دریافت متون یک المنت

اگر بخوایم در jQuery به متون یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد text به متنهای درون اون دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که با استفاده از textContent یا innerText به متن درون المنت دسترسی پیدا کردیم.

برای IE9 به بالا:

میبینید که به سادگی با استفاده از خصوصیت textContent به متن درون المنت دسترسی پیدا کردیم.

مورد 18 : بررسی داشتن کلاسی خاص

اگر بخوایم در jQuery بررسی کنیم که یک المنت ، کلاس خاصی رو داره یا خیر، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد hasClass بررسی میشه که المنت el دارای کلاسی بنام className هست یا خیر. اگر این کلاسو داشته باشه true و در غیر اینصورت false خواهد بود.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که در ابتدا بررسی میشه که مرورگر خصوصیت classList رو پشتیبانی میکنه یا خیر. اگر پشتیبانی نکرد با استفاده از عبارات منظم یا Regex بررسی میشه که className وجود داره یا خیر. اگر test با موفقیت انجام بشه، true برگشت داده میشه.

برای IE10 به بالا:

بدلیل اینکه مرورگر IE10 به بالا از خصوصیت classList پشتیبانی میکنه، میتونین با روش ساده بالا به هدفتون برسید. با استفاده از متد contains میتونین بررسی کنید که المنت el شامل کلاس className هست یا خیر.

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق و سربلند باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Reimagined Profile ) جالب رو در اختیارتون بزارم.

همونطور که دیدین یک استایل زیبا برای پروفایل قرار داده شده و زمانی که بر روی عکس کاربر مورد نظر هاور میکنید حالت اون به زیبایی عوض میشه.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون تعدادی آیکون زیبا قرار داده شده که میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید.

برای شروع وارد سایت icon-font بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);

* {

box-sizing: border-box;

}

html,

body {

overflow-x: hidden;

font-family: "Open Sans", sans-serif;

font-weight: 300;

color: #fff;

background: #134A46;

text-align: center;

}

span {

position: relative;

display: inline-block;

margin: 45px 10px;

}

.swing {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 60px;

transition: all .3s ease-in-out;

}

.swing::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

.swing + label {

display: inline-block;

position: absolute;

top: 0;

left: 0;

padding: 10px 15px;

text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);

background: #7AB893;

border-top-left-radius: 3px;

border-bottom-left-radius: 3px;

transform-origin: 2px 2px;

transform: rotate(0);

animation: swing-back .4s 1 ease-in-out;

}

@keyframes swing {

0% {

transform: rotate(0);

}

20% {

transform: rotate(116deg);

}

40% {

transform: rotate(60deg);

}

60% {

transform: rotate(98deg);

}

80% {

transform: rotate(76deg);

}

100% {

transform: rotate(82deg);

}

}

@keyframes swing-back {

0% {

transform: rotate(82deg);

}

100% {

transform: rotate(0);

}

}

.swing:focus,

.swing:active {

color: #377D6A;

text-indent: 0;

background: #fff;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

}

.swing:focus::-webkit-input-placeholder,

.swing:active::-webkit-input-placeholder {

color: #aaa;

}

.swing:focus + label,

.swing:active + label {

animation: swing 1.4s 1 ease-in-out;

transform: rotate(82deg);

}

- - , .

سون لرن • آموزش...

*, *:after, *::before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

text-align: center;

padding-top: 50px;

}

@font-face {

font-weight: normal;

font-style: normal;

font-family: 'icomoon';

src:url('fonts/icomoon.eot');

src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf') format('truetype'),

url('fonts/icomoon.woff') format('woff'),

url('fonts/icomoon.svg#icomoon') format('svg');

}

/* General styles for all types of buttons */

.progress-button {

position: relative;

display: inline-block;

padding: 0 60px;

outline: none;

border: none;

background: #1d9650;

color: #fff;

text-transform: uppercase;

letter-spacing: 1px;

font-size: 1em;

line-height: 4;

cursor: pointer;

}

.progress-button[disabled],

.progress-button[disabled].state-loading {

cursor: default;

}

.progress-button .content {

position: relative;

display: block;

}

.progress-button .content::before,

.progress-button .content::after {

position: absolute;

right: 20px;

color: #0e7138;

font-family: "icomoon";

opacity: 0;

-webkit-transition: opacity 0.3s 0.3s;

transition: opacity 0.3s 0.3s;

}

.progress-button .content::before {

content: "e600"; /* Checkmark for success */

}

.progress-button .content::after {

content: "e601"; /* Cross for error */

}

.progress-button.state-success .content::before,

.progress-button.state-error .content::after {

opacity: 1;

}

.notransition {

-webkit-transition: none !important;

transition: none !important;

}

.progress-button .progress {

background: #148544;

}

.progress-button .progress-inner {

position: absolute;

left: 0;

background: #0e7138;

}

.progress-button[data-horizontal] .progress-inner {

top: 0;

width: 0;

height: 100%;

-webkit-transition: width 0.3s, opacity 0.3s;

transition: width 0.3s, opacity 0.3s;

}

.progress-button[data-vertical] .progress-inner {

bottom: 0;

width: 100%;

height: 0;

-webkit-transition: height 0.3s, opacity 0.3s;

transition: height 0.3s, opacity 0.3s;

}

/* Necessary 3d styles for buttons with perspective */

.progress-button[data-perspective] {

position: relative;

display: inline-block;

padding: 0;

background: transparent;

-webkit-perspective: 900px;

perspective: 900px;

}

.progress-button[data-perspective] .content {

padding: 0 60px;

background: #1d9650;

}

.progress-button[data-perspective] .progress-wrap {

display: block;

-webkit-transition: -webkit-transform 0.2s;

transition: transform 0.2s;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.progress-button[data-perspective] .content,

.progress-button[data-perspective] .progress {

outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */

}

/* flip open 3d */

/* ====================== */

.progress-button[data-style="flip-open"] .content {

z-index: 10;

-webkit-transition: -webkit-transform 0.2s;

transition: transform 0.2s;

-webkit-transform-origin: 50% 0;

transform-origin: 50% 0;

}

.progress-button[data-style="flip-open"] .progress {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.progress-button[data-style="flip-open"].state-loading .content {

-webkit-transform: rotateX(45deg);

transform: rotateX(45deg);

}

- - , .

سون لرن • آموزش...

در این قسمت میخوام یک کد ( Responsive movie app UI ) جالب رو در اختیارتون بزارم.

همونطور که دیدین رابط کاربری زیبا برای سایت فیلم قرار داده شده و میتونین از اون استفاده کرده و ایده بگیرید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

- - , .

سون لرن • آموزش...

در این مطلب میخوام سایتی رو بهتون معرفی کنم که تصویر مورد نظر شما رو به بلاکهای 1 در 1 Lego تبدیل میکنه و اونو مثل وسایل بازی بچه ها میکنه.

برای شروع وارد سایت Legofy بشین.

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

- - , .

سون لرن • آموزش...

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره.

موضوع 3 : المنتها و کار با DOM

مورد 12 : پیدا کردن المنتها

اگر بخوایم در jQuery المنتهای خاصی رو پیدا و انتخاب کنیم، بصورت زیر عمل میکنیم:

میبینید که به سادگی و با استفاده از $ اومدیم و انتخابگری بر پایه CSS وارد کردیم. حالا jQuery جستجو میکنه و المنتهای منطبق رو بر میگردونه.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از متد querySelectorAll اینکارو کردیم و با وارد کردن انتخابگر مورد نظرمون المنتهای منطبق برگشت داده میشن.

برای این مورد، یعنی انتخاب کردن المنتهای مورد نظر میتونین از دو ابزار زیر نیز استفاده کنید:

مورد 13 : دسترسی به خصوصیت یک المنت

اگر بخوایم در jQuery به خصوصیت های یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در کد بالا بسادگی با استفاده از متد attr به خصوصیت tabindex المنت el دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از متد getAttribute اینکارو کردیم و با وارد کردن خصوصیت مورد نظرمون به ویژگی مورد نظر المنتمون دسترسی پیدا کردیم.

مورد 14 : دریافت محتویات HTML یک المنت

اگر بخوایم در jQuery به محتویات html یک المنت دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در کد بالا بسادگی با استفاده از متد html به محتویات html المنت el دسترسی پیدا کردیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از خصوصیت innerHTML از المنت el به محتویات اون دسترسی پیدا کردیم.

مورد 15 : دریافت Outer HTML یک المنت

اگر بخوایم در jQuery به کل کد html شامل خودش هم دسترسی داشته باشیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا یک div موقتی ساخته شده و یک کپی از المنت مورد نظر درونش قرار داده شده. بعد از اون میتونیم با استفاده از متد html به کل کدهای html اون المنت دسترسی داشته باشیم با این تفاوت که خودش نیز شامل میشود.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

میبینید که به سادگی با استفاده از خصوصیت outerHTML از المنت el به کل محتویات اون دسترسی پیدا کردیم. دیدید که Javascript در این مورد خیلی ساده و راحت بود و برای این مورد یک خصوصیت از پیش تعریف شده داشت.

امیدوارم که از این مطلب خوشتون اومده باشه.

موفق و سربلند باشید.

یا علی

Source

- - , .

سون لرن • آموزش...